<template>
    <div class="pagination">
        <button @click="changepageno(pageNo - 1)" :disabled="pageNo === 1">上一页</button>
        <button @click="changepageno(1)" v-show="Startend.start > 1">1</button>
        <span v-show="Startend.start > 2">···</span>

        <button @click="changepageno(index + Startend.start)" :class="{ active: pageNo === index + Startend.start }"
            v-for="(n, index) in Startend.end - Startend.start + 1" :key="index">{{
                index + Startend.start }}</button>

        <span v-show="totalPage - 1 > Startend.end">···</span>
        <button @click="changepageno(totalPage)" v-show="Startend.end !== totalPage">{{ totalPage }}</button>
        <button @click="changepageno(pageNo + 1)" :disabled="pageNo === totalPage">下一页</button>

        <span>共 {{ total }} 条</span>
    </div>
</template>

<script>
export default {
    name: "Pagination",
    props: {
        //总数
        total: {
            type: Number,
            required: true
        },
        //每页展示数量化
        pageSize: {
            type: Number,
            required: true
        },
        //当前页码
        pageNo: {
            type: Number,
            required: true
        },
        //连续页数
        continues: {
            type: Number,
            default: 5,
        },
        changepageno: {
            type: Function,
            required: true
        }
    },
    computed: {
        Startend() {
            let { pageNo, continues, pageSize, totalPage } = this

            let start;
            let end
            if (continues > totalPage) {
                start = 1
                end = totalPage
            } else {
                start = pageNo - (continues - 1) / 2
                end = pageNo + (continues - 1) / 2
                if (start < 1) {
                    start = 1
                    end = continues
                }
                if (end > totalPage) {
                    start = totalPage - continues + 1
                    end = totalPage
                }
            }


            return { start, end }
        },
        totalPage() {
            return Math.ceil(this.total / this.pageSize)
        }
    }
};
</script>

<style lang="less" scoped>
.pagination {
    text-align: center;

    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: gray;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #c81623;
            color: #fff;
        }
    }

    span {
        display: inline-block;
        line-height: 28px;
        font-size: 14px;
        color: gray;
        vertical-align: middle;
    }
}
</style>